<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout Layui</title>
</head>
<link href="/static/layui-v2.5.6/css/layui.css" rel="stylesheet"/>
<link href="/static/layui-v2.5.6/layuicommon.css" rel="stylesheet" />
<link href="/static/layui-v2.5.6/ext/soulTable/soulTable.css" rel="stylesheet"/>
<link href="/static/layui-v2.5.6/ext/treegrid/treeGrid.css" rel="stylesheet"/>
<script src="/static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="/static/js/dlcommon.js?v=3" type="text/javascript"></script>
<script src="/static/layui-v2.5.6/layui.all.js" type="text/javascript"></script>
<script src="/static/layui-v2.5.6/layui.js" type="text/javascript"></script>
<script src="/static/layui-v2.5.6/ext/treegrid/treeGrid.js" type="text/javascript"></script>
<body class="layui-layout-body" style="padding: 8px">
<div style="height: 100%;background: #F7F7F7;">
    <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf">
        <div class="flex flex-align-center">
            <div class="layui-form flex flex-align-center">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        <select name="interest" lay-filter="aihao">
                            <option value="0">分类1</option>
                            <option value="1">分类2</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item marginleft10 search">
                    <label class="layui-form-label">查询</label>
                    <div class="layui-input-block">
                        <input type="text" name="" placeholder="请输入序号/名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal marginleft10">确定</button>
            </div>
        </div>
        <div class="layui-btn-group btns">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='101'>分类维护</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='102'>表维护</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='103'>新增元数据</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='104'>数据库导入</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='105'>更新SQL</button>
            <a class="layui-btn layui-btn-primary"  onclick="window.location.href='index.html';">刷新</a>
            <a class="layui-btn layui-btn-primary"  onclick="add();">新增一行</a>
            <a class="layui-btn layui-btn-primary"  onclick="print();">打印缓存对象</a>
        </div>
    </div>

    <div class="flex flex-jusity-betreen " style="height:100%;background: #F7F7F7;padding: 3px 3px 3px 3px;">
        <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
    </div>
</div>
<script>
    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
        base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
        version: 'v1.5.10' // 插件版本号
    }).extend({
        soulTable: 'soulTable/soulTable',
        tableChild: 'soulTable/tableChild',
        tableMerge: 'soulTable/tableMerge',
        tableFilter: 'soulTable/tableFilter',
        excel: 'soulTable/excel',
        dltable: 'treegrid/dltable',
        treeGrid:'treegrid/treeGrid'
    });
    layui.use(['jquery','treeGrid','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;


        dLong.getJSON("/static/layui-v2.5.6/data2.json",function (res) {
            ptable=treeGrid.render({
                id:tableId
                ,elem: '#'+tableId
                ,idField:'id'
                // ,url:'/static/layui-v2.5.6/data2.json'
                ,data:res&&res.data?(res.data):[]
                ,cellMinWidth: 100
                ,treeId:'id'//树形id字段名称
                ,treeUpId:'pId'//树形父id字段名称
                ,treeShowName:'name'//以树形式显示的字段
                ,cols: [[
                    {width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
                        ,templet: function(d){
                            var html='';
                            var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
                            var delBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>';
                            return addBtn+delBtn;
                        }
                    }
                    ,{field:'name', edit:'text',width:300, title: '水果名称'}
                    ,{field:'id',width:100, title: 'id'}
                    ,{field:'pId', title: 'pid'}
                ]]
                ,page:false
            });
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="add"){//添加行
                add(obj.data);
            }
        });
    });

    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
            function(index){//确定回调
                obj.del();
                layer.close(index);
            },function (index) {//取消回调
               layer.close(index);
            }
        );
    }


    var i=1000;
    //添加
    function add(pObj) {
        var param={};
        param.name='水果'+Math.random();
        param.id=++i;
        param.pId=pObj?pObj.id:0;
        treeGrid.addRow(tableId,pObj?pObj.LAY_TABLE_INDEX+1:0,param);
    }

    function print() {
        console.log(treeGrid.cache[tableId]);
        var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", {
            time:3000
            ,offset: 'auto'//顶部
            ,shade: 0
        });
    }
</script>
</body>
</html>